<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/home/datailed.css">
</script>
<div class="layui-containner">
    <form id="view-one" class="layui-form" lay-filter="form"></form>
</div>
<style scoped>
    .add{
        font-size: 8px;
        color: #000;
    }
    .submit,.quxiao{
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        color: black;
        outline: none;
        text-decoration: none;
        margin-right: 20px;
    }
    #one,#two,#three{
        color: #FFF;
        font-size: 8px;
        margin-right: 15px;
        height: 25px;
        line-height: 25px;
    }
    .del{
        text-align: center;
        width: 50px;
    }
    .view-look{
        display: block;
        text-align: left;
        font-size: 14px;
        color: black;
        padding: 20px;
        padding-left: 30px;
    }
   .editButton{
     background: #98AEBE;
     margin-left: 17px;
   }
   .submit,.quxiao{
       border: 0px;
   }
   .quxiao{
       color:#fff !important;
       background: #8A8A8A !important;
   }
</style>
<script type="text/html"  id="list-one">
    <div class="layui-fluid">
        <div class="layui-title">
            <div class="layui-title-inner">基本信息 &nbsp;{{ d.ruleType }}</div>
            <button type="button" class="editButton layui-btn layui-btn-xs layui-btn-radius"  id="edit">
                <i class="layui-icon layui-icon-edit" style="cursor: pointer; font-size: 15px;color: #616161;color:#fff;"></i>
                <span>编辑</span>
            </button>  
        </div>
        {{#  layui.each(d.list, function(index, item){ }}
        <ul class="box layui-row">
            <li class="layui-col-md6 layui-col-sm6">
                {{#  if(item.key && item.des && item.value != null){ }}
                    {{#  if(item.value == 'yyyy' || item.value == 'mm' || item.value == 'dd'){ }}
                    <div>{{ item.name }} {{ item.des }}</div>
                    {{#  } else { }}
                    <div>{{ item.des }}  {{ item.name }} {{ item.value }}</div>
                    {{#  } }} 
                    {{#  } else { }}
                <div></div>
                {{#  } }} 
            </li>
        </ul>
        {{#  }); }}
    </div>
    <div class="layui-fluid">
        <div class="layui-title">
            <div class="layui-title-inner">预览</div>
        </div>
        <div class="box">
            <div id="look-view"></div>
        </div>
    </div>
</script>
<script type="text/html"  id="list-form">
    <div class="layui-fluid layui-form-item">
        <div class="layui-title">
            <div class="layui-title-inner">基本信息 &nbsp;{{ d.ruleType }}</div>
            <div class='layui-col-md-offset3'>
                <button class="add layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" id="one">添加流水号</button>
                <button class="add layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" id="two">添加字符串</button>
                <button class="add layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" id="three">添加时间选择器</button>
            </div>
        </div>
        {{#  layui.each(d.list, function(index, item){ }}
        <ul class="box layui-row layui-form" id="list">
                {{#  if(item.key && item.des && item.value != null){ }}
                 {{#  if( item.value == 'yyyy'){ }}
                    <li class="layui-col-md6 layui-col-sm6 layui-form"  id="select_yer">
                        <div class="layui-form-item layui-col-md6 layui-col-sm6 layui-input-block">
                            <label class="layui-form-label" lay-filter="{{ item.key }}">{{ item.name }}</label>
                            <div class="layui-input-block">
                                    <select name="{{ item.key }}" lay-filter="yer" lay-search data-name="{{index}}">
                                        <option value="Y" name="年">{{ item.des }}</option>
                                        <option value="M" name="月">当前月</option>
                                        <option value="D" name="日">当前日</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                    {{#  } else if(item.value == 'mm') { }}
                        <li class="layui-col-md6 layui-col-sm6 layui-form" id="select_moth">
                            <div class="layui-form-item">
                                <label class="layui-form-label"  lay-filter="{{ item.key }}">{{ item.name }}</label>
                                <div class="layui-input-block">
                                    <select name="{{ item.key }}" lay-filter="moth" data-name="{{index}}">
                                        <option value="M" name="月">{{ item.des }}</option>
                                        <option value="Y" name="年">当前年</option>
                                        <option value="D" name="日">当前日</option>
                                    </select>
                                </div>
                            </div>
                        </li>
                    {{#  } else if(item.value == 'dd') { }}
                    <li class="layui-col-md6 layui-col-sm6 layui-form" id="select_day">
                        <div class="layui-form-item">
                            <label class="layui-form-label" value="{{ item.key }}">{{ item.name }}</label>
                            <div class="layui-input-block">
                            <select name="{{ item.key }}" lay-filter="day" data-name="{{index}}">
                                <option value="D" name="日">{{ item.des }}</option>
                                <option value="Y" name="年">当前年</option>
                                <option value="M" name="月">当前月</option>
                            </select>
                        </div>
                        </div>
                    </li>
                    {{#  } else { }}
                        {{#  if( item.name == '流水号'){ }}
                        <li class="layui-col-md6 layui-col-sm6 layui-form" id="input">
                            <div class="layui-form-item">
                                <label class="layui-form-label" name="text_name">{{ item.des }} {{ item.name }}  :</label>
                                <div class="layui-input-block">
                                <input type="text" name="{{ item.key }}" placeholder="请输入" autocomplete="off" class="layui-input" value="{{ item.value }}" lay-verify="length">
                                </div>
                            </div>
                        </li>
                        {{#  } else { }}
                        <li class="layui-col-md6 layui-col-sm6 layui-form" id="input">
                            <div class="layui-form-item">
                                <label class="layui-form-label" name="text_name">{{ item.des }} {{ item.name }}  :</label>
                                <div class="layui-input-block">
                                <input type="text" name="{{ item.key }}" placeholder="请输入" autocomplete="off" class="layui-input" value="{{ item.value }}">
                                </div>
                            </div>
                        </li>
                        {{#  } }} 
                    {{#  } }} 
                {{#  } else { }}
                <div></div>
                {{#  } }} 
                <li calss="layui-col-md-offset12 layui-col-sm-offset12">
                    <div class="layui-input-block">
                        <div class="layui-input-block">
                            <button type="reset" class="del layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">
                            <i class="layui-icon layui-icon-delete"></i>  
                            </button>
                        </div>
                    </div>
                </li>
        </ul>
        {{#  }); }}
    </div>
    <div class="layui-fluid">
        <div class="layui-title">
            <div class="layui-title-inner">预览</div>
        </div>
        <div class="box">
            <div id='look-view'></div>
        </div>
    </div>
    <div class="layui-form-item layui-fluid">
        <div class="layui-input-inline-block">
          <button class="submit layui-btn layui-btn-radius layui-btn-primary layui-bg-red" lay-submit lay-filter="submit" id="submit">提交</button>
          <button type="reset" class="quxiao layui-btn layui-btn-radius layui-btn-primary layui-bg-gray">取消</button>
        </div>
    </div>
</script>
<script type="text/html"  id="list-look">
    <div class="view-look layui-fluid">{{ d.data }}</div>
</script>
<script>
     var index = 4;
    var index_two = 1,index_one = 1;
    var index_three = 1;
    var mydata = '';
    let des = '';
    layui.use(['table', 'admin', 'laypage', 'jquery', 'laytpl', 'tree', 'form', 'api', 'view', 'laydate', 'setter', 'treeSelect','element'], function () {
            var form = layui.form;
            var table = layui.table;
            var admin = layui.admin;
            var laypage = layui.laypage;
            var $ = layui.jquery;
            var laytpl = layui.laytpl;
            var tree = layui.tree;
            var api = layui.api;
            var view = layui.view;
            var laydate = layui.laydate;
            var setter = layui.setter;
            var treeSelect = layui.treeSelect;
            var element = layui.element;
            form.verify({
                length: function(value, item){
                    if(!new RegExp(/^[3-8]{0,1}$/).test(value)){
                        return '请输入数字3-8！'
                    }
                }
            });

            form.render(); 
            var id = JSON.parse(sessionStorage.getItem('ruleId'));
            var  href = JSON.parse(sessionStorage.getItem('layui-this'));
            $(href).addClass('layui-this');
            admin.req({
                type: 'get',
                url: api.host + api.new.two,
                data: {id},
                contentType: "application/json",
                success: function (data) {
                    var data = data.data;
                    mydata = data;
                    laytpl($('#list-one').html()).render(data, function (html) {
                    $('#view-one').html(html)
                    admin.req({
                        type: 'get',
                        url: api.host + api.new.look,
                        data:{id},
                        contentType: "application/json",
                        success: function (data) {
                            laytpl($('#list-look').html()).render(data, function (html) {
                                $('#look-view').html(html)
                            });
                        }
                    })
                    laydate.render({
                        elem: '#test1' //指定元素
                    });
                });
                }
            })
        $('#view-one').on('click', '#edit',function(){
            admin.req({
                type: 'get',
                url: api.host + api.new.two,
                data: {id},
                contentType: "application/json",
                success: function (data) {
                    var data = data.data;
                    laytpl($('#list-form').html()).render(data, function (html) {
                    $('#view-one').html(html)
                    admin.req({
                        type: 'get',
                        url: api.host + api.new.look,
                        data:{id},
                        contentType: "application/json",
                        success: function (data) {
                            laytpl($('#list-look').html()).render(data, function (html) {
                                $('#look-view').html(html)
                            });
                        }
                    })
                    form.render(); 
                });
                }
            })
        });
        function tab(data){
            let name = data.elem.name;
            let val = data.value;
            if(name.indexOf('Y') != -1){
                let num = name.split('Y')[1];
                data.elem.name = val + num;
            }else if(name.indexOf('M') != -1){
                let num = name.split('M')[1];
                data.elem.name = val + num;
            }else if(name.indexOf('D') != -1){
                let num = name.split('D')[1];
                data.elem.name = val + num;
            }
        }
        form.on('select', function(data){
           tab(data);
           if(data.value == 'Y'){
                $(this).parent().parent().parent().prev().text('年');
            }else if(data.value == 'M'){
                $(this).parent().parent().parent().prev().text('月');
            }else if(data.value == 'D'){
                $(this).parent().parent().parent().prev().text('日');
            }
            form.render(); 
            return false;
        });
        function my_data_list(myname,val,num = 1){
            let arr = [];
            let name = '';
            mydata.list.forEach((item,index)=>{
                if(item.name == myname){
                    arr.push(item.key);
                    let length = arr.length -1;
                    name = arr[length].split(val)[1];
                    return num = Number(name);
                }else{
                    return;
                }
            });
            return num;
        }
        var data1 = form.val("formTest");
        $('#view-one').on('click','#one',function(){
            index_one =  index_one>=my_data_list('流水号','L')?index_one:my_data_list('流水号','L');
            index_one ++;
            let html = `<ul class="box layui-row" id="list">
                            <li class="layui-col-md6 layui-col-sm6 layui-form" >
                                <div class="layui-form-item">
                                    <label class="layui-form-label" name="text_name" value="">流水号:</label>
                                    <div class="layui-input-block">
                                    <input type="text" name="L`+index_one+`" placeholder="请输入" autocomplete="off" class="layui-input" value=""  lay-verify="length">
                                    </div>
                                </div>
                            </li>
                            <li calss="layui-col-md-offset12 layui-col-sm-offset12">
                                <div class="layui-input-block">
                                    <div class="layui-input-block">
                                        <button type="reset" class="del layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">
                                        <i class="layui-icon layui-icon-delete"></i>  
                                        </button>
                                    </div>
                                </div>
                            </li>
                        </ul>`;
            $('.layui-fluid:first').append(html);
            form.render(); 
            return false;
        });
        $('#view-one').on('click','#two',function(){
            index_two =  index_two>=my_data_list('字符串','S')?index_two:my_data_list('字符串','S');
            index_two ++;
            let html = `<ul class="box layui-row" id="list">
                            <li class="layui-col-md6 layui-col-sm6 layui-form" >
                                <div class="layui-form-item">
                                    <label class="layui-form-label" name="text_name" value="">字符串:</label>
                                    <div class="layui-input-block">
                                    <input type="text" name="S`+index_two+ `" placeholder="请输入" autocomplete="off" class="layui-input" value="">
                                    </div>
                                </div>
                            </li>
                            <li calss="layui-col-md-offset12 layui-col-sm-offset12">
                                <div class="layui-input-block">
                                    <div class="layui-input-block">
                                        <button type="reset" class="del layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">
                                        <i class="layui-icon layui-icon-delete"></i>  
                                        </button>
                                    </div>
                                </div>
                            </li>
                        </ul>`;
            $('.layui-fluid:first').append(html);
            form.render(); 
            return false;
        });

        $('#view-one').on('click','#three',function(){
            index_three =  index_three>=my_data_list('月','M')?index_three:my_data_list('月','M');
            index_three ++;
            let html = `<ul class="box layui-row layui-form" id="list">
                            <li class="layui-col-md6 layui-col-sm6 layui-form" id="select_moth">
                                <div class="layui-form-item">
                                    <label class="layui-form-label" name="moth_name" value="">月</label>
                                    <div class="layui-input-block">
                                        <select name="M`+index_three+`" data-name="`+index_three+`" lay-filter="moth">
                                            <option value="M">当前月</option>
                                            <option value="Y">当前年</option>
                                            <option value="D">当前日</option>
                                        </select>
                                    </div>
                                </div>
                            </li>
                            <li calss="layui-col-md-offset12 layui-col-sm-offset12">
                                <div class="layui-input-block">
                                    <div class="layui-input-block">
                                        <button type="reset" class="del layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">
                                        <i class="layui-icon layui-icon-delete"></i>  
                                        </button>
                                    </div>
                                </div>
                            </li>
                        </ul>`;
            $('.layui-fluid:first').append(html);
            form.render(); 
            return false;
        });
            $('#view-one').on('click','.del',function(){
                $(this).parents('.box').remove();
            })
        $('#LAY_app_body').on('click','.quxiao',function(){
            setTimeout(function(){
                window.location = '#/home/user';
            },1000)
        })
        form.on('submit(submit)', function(data){
            var voList = [];
            var obj = data.field;
            for (var i in obj) {
                voList.push({
                    key: i,
                    value: obj[i]
                })
            }
            admin.req({
                type: 'post',
                url: api.host + api.new.fore,
                data: JSON.stringify({voList,ruleId : id}),
                contentType: "application/json",
                success: function (data) {
                    layer.msg(data.message);
                }
            });
            setTimeout(function(){
                window.location = '#/home/user';
            },2000);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    })  
</script>
